<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            display: none;
        }
    </style>
</head>
<body>

    <div>
        <button style="color: red;">1</button>
        <button>2</button>
        <button>3</button>
    </div>
    <div>
        <p style="display: block;">1</p>
        <p>2</p>
        <p>3</p>
    </div>

    <script>

        // 写结构和样式


        // 选项卡
        //   上半部分   单选效果
        //   下半部分
        //       先隐藏所有的p ，显示当前的p
        //          当前的p就是点击的第几个按钮对应的第几个p  --- 只要找到点击的是第几个按钮就好了
        

        // 给按钮绑定事件之前，先给每个按钮添加自定义属性，值是下标，也就是为了点击的时候找到第几个






        var oBtns = document.querySelectorAll('button') ;   // NodeList 类数组
        console.log(oBtns) ;
        var oPs = document.querySelectorAll('p') ;  
        
      

        // 绑定点击事件
        for(var i = 0 ; i < oBtns.length ; i++) {
            // 先绑定自定义属性
            oBtns[i].qq = i ;
            oBtns[i].onclick = function() {
               
                for(var i = 0 ; i < oBtns.length ; i++) {
                    // 给每个按钮清除样式
                    oBtns[i].style.color = 'black' ;
                    // 给个p都隐藏
                    oPs[i].style.display = 'none' ;
                }
                // 当前为红色
                this.style.color = 'red';
                // 给当前按钮对应的下标显示p
                oPs[this.qq].style.display = 'block' ;

            }
        }
        

    </script>
    
</body>
</html>